<template>
  <div class="set-first-div" style="height: calc(100vh - 198px);">
    <a-form-model ref="ruleForm" :rules="rules" :model="userInfo" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="姓名">
        <a-input v-model="userInfo.displayName" :disabled="true" />
      </a-form-model-item>
      <a-form-model-item label="账号">
        <a-input v-model="userInfo.username" :disabled="true" />
      </a-form-model-item>
      <a-form-model-item label="当前密码" prop="nowPassword" >
        <a-input-password v-model="userInfo.nowPassword" />
      </a-form-model-item>
      <a-form-model-item label="新密码" prop="password">
        <a-input-password v-model="userInfo.password" />
      </a-form-model-item>
      <a-form-model-item label="确认密码" prop="affirmPassword">
        <a-input-password v-model="userInfo.affirmPassword" />
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" class="set-button-padding-left">
        <a-button type="primary" @click="onSubmit">
          保存
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
import dispose from "../../../api/dispose";
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        password: '',
        affirmPassword: '',
        nowPassword: '',
      },
      userInfo: {
        nowPassword:"",
        password:"",
        affirmPassword:""
      },
      rules: {
        nowPassword: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
        password: [{ required: true, message: '请输入新密码（必须有一个大写字母，数字，符号）', trigger: 'blur' }],
        affirmPassword: [{ required: true, message: '请再次输入新密码', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    dispose
      .getPersonalData()
      .then((res) => {
        this.userInfo = res.data.data
      })
      .catch((err) => {
        console.error(err);
      });
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        const data = {
          password: this.userInfo.password,
          oldPassword: this.userInfo.nowPassword,
          confirmPassword: this.userInfo.affirmPassword,
          displayName: this.userInfo.displayName,
          id: this.userInfo.id,
          status: this.userInfo.status,
          switch_status: false,
          userId: this.userInfo.userId,
          username: this.userInfo.username
        }
        console.log(data);
        if (valid) {
          if (this.userInfo.password != this.userInfo.affirmPassword) {
            this.$message.error('两次密码输入一致，请重新输入');
            return;
          }

          dispose.updatePasword(data).then((res => {
            if (res.data.code == 0) {
              this.$message.success('操作成功');
            }else if(res.data.code == 1) {
              this.$message.error('密码格式不正确');
            }
          }))
        } else {
          console.log('error submit!!');
          return false;
        }
      })

    }
  }
}
</script>

<style>
.set-first-div {
  padding-left: 30px;
  padding-top: 40px;
  height: 500px;
  background-color: white;
}
.set-button-padding-left {
  padding-left: 300px;
}
</style>
